<template>
  <el-form :model="form" v-if="form.data">
    <!-- 名称 -->
    <el-form-item label="名称" :label-width="formLabelWidth" :rules="[{ required: true}]">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <!-- 类型 -->
    <el-form-item label="类型" :label-width="formLabelWidth" :rules="[{ required: true}]">
      <el-select v-model="form.type" placeholder="请选择题目类型">
        <el-option label="单选" value="单选"></el-option>
        <el-option label="多选" value="多选"></el-option>
        <el-option label="填空" value="填空"></el-option>
        <el-option label="解答" value="解答"></el-option>
      </el-select>
    </el-form-item>
    <!-- 富文本 -->
    <el-form-item label="内容" :label-width="formLabelWidth" :rules="[{ required: true}]">
      <EditorBar v-model="form.text"></EditorBar>
    </el-form-item>
    <!-- 选项 -->
    <el-form-item label="选项" :label-width="formLabelWidth" style="margin-bottom:0">
      <el-row v-if="form.type !='解答'">
        <el-button type="warning" icon="el-icon-plus" circle @click="addOption"></el-button>
        <el-button type="danger" icon="el-icon-delete" circle @click="delOption"></el-button>
      </el-row>
    </el-form-item>
    <el-form-item label :label-width="formLabelWidth">
      <el-radio-group v-model="form.data.answer">
        <!-- v-show="opt1" -->
        <el-radio
          v-show="form.type=='单选'"
          :label="item"
          v-for="(item,index) in form.data.单选"
          :key="index+'radio'"
        >{{item}}</el-radio>
        <el-checkbox-group v-show="form.type=='多选'" v-model="form.data.answer">
          <el-checkbox v-for="city in form.data.多选" :label="city" :key="city+'check'">{{city}}</el-checkbox>
        </el-checkbox-group>
        <el-input
          v-show="form.type=='填空'"
          placeholder="请输入内容"
          v-for="(item,index) in form.data.填空"
          v-model="form.data.填空[index]"
          :key="index+'input'"
        ></el-input>
      </el-radio-group>
    </el-form-item>
    <!-- 答案 -->
    <el-form-item label="答案" :label-width="formLabelWidth">
      <span>{{answer}}</span>
    </el-form-item>
    <!-- 解析 -->
    <el-form-item label="解析" :label-width="formLabelWidth">
      <el-input v-model="form.analysis" autocomplete="off"></el-input>
    </el-form-item>
    <!-- 知识点 -->
    <el-form-item label="知识点" :label-width="formLabelWidth">
      <el-input v-model="form.knowledgepoints" autocsomplete="off"></el-input>
    </el-form-item>
    <!-- 标签 -->
    <el-form-item label="标签" :label-width="formLabelWidth">
      <el-input v-model="form.tags" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import EditorBar from "../wangE/index.vue";
export default {
  props: {
    formData: {
      default: {}
    },
    setData: {
      default: () => void 0
    }
  },
  data() {
    return {
      form: {},
      formLabelWidth: "80px",
      charcode: 65
    };
  },
  computed: {
    answer: {
      set(v) {
        if (this.form.type == "单选") {
          this.form.data.answer = v;
        } else if (this.form.type == "多选") {
          this.form.data.answer.push(v);
        }
      },
      get() {
        if (this.form.type == "单选") {
          return this.form.data.answer;
        } else if (this.form.type == "多选") {
          return this.form.data.answer.toString();
        } else if (this.form.type == "填空") {
          return this.form.data.填空.toString();
        }
        return "";
      }
    }
  },
  mounted() {
    this.form = this.formData;
  },
  watch: {
    form(v) {
      this.setData(v);
    },
    "form.type": function(newV) {
      console.log(newV);
      if (newV == "多选" || newV == "填空") {
        this.form.data.answer = [];
      } else {
        this.form.data.answer = "";
      }
    },
    formData: {
      deep: true,
      handler(v) {
        this.form = v;
      }
    }
  },
  methods: {
    //删除选项
    delOption() {
      this.form.data.单选.pop();
      this.form.data.多选.pop();
      this.form.data.填空.pop();
      if (this.charcode > 65) {
        this.charcode--;
      }
    },
    //添加选项
    addOption() {
      if (this.form.type == "单选") {
        if (this.charcode < 75) {
          const length = this.form.data.单选.length;
          this.charcode = 65 + length;
          this.form.data.单选.push(String.fromCharCode(this.charcode));
          this.charcode++;
        }
      }
      if (this.form.type == "多选") {
        if (this.charcode < 75) {
          const length = this.form.data.多选.length;
          this.charcode = 65 + length;
          this.form.data.多选.push(String.fromCharCode(this.charcode));
          this.charcode++;
        }
      }
      if (this.form.type == "填空") {
        if (this.form.data.填空.length < 4) {
          this.form.data.填空.push("");
        }
      }
    }
  },
  components: {
    EditorBar
  }
};
</script>

<style>
</style>